<template>
  <div style>
    <div
        v-if="loading"
        style="position: fixed;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;"
    >
      <Loading size="24px" vertical>数据整理中...</Loading>
    </div>
    <div style="background: rgba(69,69,146,0.06);position: relative;" v-else>
      <div
          style="z-index:2;background-color: #fff;height: 58px;display: flex;align-items: center;position:fixed;width:100%;top:0;"
      >
        <div
            @click="handleCalendarShow"
            style="display:flex;font-family: PingFangSC-Medium;font-size: 20px;
                     color: #454592;letter-spacing: 0.38px;text-align: justify;line-height: 30px;margin:12px 0 12px 28px;
                     width: 149px;height: 34px;background: rgba(69,69,146,0.06);border-radius: 17.5px;margin-left: 12px;"
        >
          <div
              style="width: 78%;display: flex;justify-content: center;align-items: center"
          >{{ cal_label }}
          </div>
          <div style="width: 20%;display: flex;justify-content: center;align-items: center;">
            <img :src="down_cc" style="width: 24px;height: 24px;"/>
          </div>
        </div>
        <div
            style="position: absolute;right: 20px;font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;line-height: 16px;"
        >
          <img :src="Combined" style="width: 11.2px;height: 12px;"/>
          {{ buName }}
        </div>
      </div>
      <Overlay :show="fullCalendarShow" :z-index="2" @click.self="fullCalendarShow=false">
        <Calendar v-model="day" style="position: fixed;"/>
      </Overlay>
      <div
          style="width: 100%;display: flex;background: #fff;border-radius: 0 0 20px 20px;margin-top:58px;"
      >
        <div style="width: 80%;">
          <div style="padding:0px 10px 20px 28px;display: flex;flex-wrap: wrap;">
            <div
                style="margin-right:5px;width: 29px;height: 29px;display: flex;justify-content: center;align-items: center;font-family: PingFangSC-Regular;font-size: 14px;color: #666666;letter-spacing: 0.26px;text-align: justify;border-radius: 50%;"
                v-for="(item,index) in dayList"
                :key="index"
                :style="{background:day==item.day?'#31317E':'',color:day==item.day?'#fff':''}"
                @click="handleDayClick(item.day)"
            >{{ item.idx }}
            </div>
          </div>
        </div>
        <div style="display: flex;flex-direction: row;width: 19%;padding-top:4px;">
          <div style="margin-right:20px;">
            <img :src="left_icon" style="width: 16px;height: 16px;" @click="changeWeek('preWeek')"/>
          </div>
          <div>
            <img
                :src="right_icon"
                style="width: 16px;height: 16px;"
                @click="changeWeek('nextWeek')"
            />
          </div>
        </div>
        <br/>
      </div>

      <van-tabs
          v-model="activeName"
          line-width="50%"
          color="#454592"
          title-active-color="#454592"
          line-height="2px"
          @change="tabChange"
      >
        <van-tab title="总览" name="a">
          <div class="field_top" v-if="bu=='PC'||bu=='DBU'||bu=='CV'||bu=='SC'||bu=='CV&EP'">
            <div class="field_top_left">
              <img :src="warning" style="margin-top: 1px"/>
            </div>
            <div class="field_top_right">此报表仅展现线上拜访相关数据</div>
          </div>
          <div class="wrapper" v-if="bu=='PC'||bu=='DBU'||bu=='CV'||bu=='SC'||bu=='CV&EP'">
            <div class="title">
              <div class="title_block"></div>
              <div class="title_text">团队概况</div>
              <div class="title_detail" style="display: none">
                <div style="float: left">详情</div>
                <div style=" float: left;margin-top: 2px;margin-left: 3px;">
                  <img :src="right"/>
                </div>
              </div>
            </div>
            <div class="field_item">
              <div class="field_item_part">
                <div class="field_item_part_title">
                  <div class="field_item_part_title_font">本日完成度</div>
                  <div class="field_item_part_title_icon">
                    <img :src="info"/>
                  </div>
                </div>
                <van-circle
                    v-model="current_num"
                    stroke-width="60"
                    :rate="dayPie.rate"
                    :speed="100"
                    :color="gradientColor"
                    layer-color="#31317e"
                    style="width: 135px;height: 135px;margin-left: 15px;margin-top: 10px"
                >
                  <div slot="default" style="width: 100%;height: 100%;">
                    <div class="slot1">{{ (dayPie.rate ? dayPie.rate : 0) + '%' }}</div>
                    <div class="slot2">已完成人数</div>
                    <div class="slot3">{{ dayPie.current }}/{{ dayPie.total }}</div>
                  </div>
                </van-circle>
              </div>
              <div class="field_item_part">
                <div class="field_item_part_title">
                  <div class="field_item_part_title_font">本月完成度</div>
                  <div class="field_item_part_title_icon">
                    <img :src="info"/>
                  </div>
                </div>
                <van-circle
                    v-model="month_num"
                    :rate="monthPie.rate"
                    stroke-width="60"
                    speed="70"
                    :color="gradientColor"
                    layer-color="#31317e"
                    style="width: 135px;height: 135px;margin-left: 15px;margin-top: 10px"
                >
                  <div slot="default" style="width: 100%;height: 100%;">
                    <div class="slot1">{{ (monthPie.rate ? dayPie.rate : 0) + '%' }}</div>
                    <div class="slot2">已完成人数</div>
                    <div class="slot3">{{ monthPie.current }}/{{ monthPie.total }}</div>
                  </div>
                </van-circle>
              </div>
            </div>

            <div v-if="channel.length!=0">
              <div class="field_click" @click="showTable" v-if="tableShow">
                <div class="field_click_title">查看多渠道详情</div>
                <div class="field_click_icon">
                  <img :src="down"/>
                </div>
              </div>
              <div class="field_tab" v-if="closeTableShow">
                <div class="field_table">
                  <span class="field_table_title1">渠道</span>
                  <span class="field_table_title2">本月覆盖客户数</span>
                  <span class="field_table_title3">
                    本月目标
                    <br/>客户覆盖数
                  </span>
                </div>
                <div class="field_table_detail" v-for="item in channel" :key="item">
                  <span class="field_table_detail_title1">{{ item.channel }}</span>
                  <span class="field_table_detail_title2">{{ item.numMonAvgDailyEng }}</span>
                  <span class="field_table_detail_title3">{{ item.numMonTotCustCov }}</span>
                </div>
              </div>

              <div class="field_click_up" @click="closeTable" v-if="closeTableShow">
                <div class="field_click_title">收起多渠道详情</div>
                <div class="field_click_icon">
                  <img :src="up"/>
                </div>
              </div>
            </div>
            <div class="title" style="margin-top: 20px">
              <div class="title_block"></div>
              <div class="title_text">团队每日达成趋势</div>
              <div class="title_detail" @click="nav2GroupDetail">
                <div style="float: left">详情</div>
                <div style=" float: left;margin-top: 2px;margin-left: 3px;">
                  <img :src="right"/>
                </div>
              </div>
            </div>

            <div class="field_tooltip" style="position: relative;padding-bottom: 20px;">
              <div class="f2-tooltip f2-tooltip-day"></div>
              <canvas id="dayChartCanvas"></canvas>
              <div
                  style="position: absolute;top:11px;left:14px;font-family: PingFangSC-Regular;font-size: 14px;letter-spacing: 0.26px;text-align: justify;text-align: justify;opacity: 0.41;"
              >(次)
              </div>
              <div
                  style="position: absolute;right:30px;bottom:10px;font-family: PingFangSC-Regular;font-size: 14px;letter-spacing: 0.26px;text-align: justify;text-align: justify;opacity: 0.41;"
              >(日)
              </div>
            </div>
            <div class="field_tooltip" style="position: relative;padding-bottom: 20px;">
              <div class="f2-tooltip f2-tooltip-month"></div>
              <canvas id="monthChartCanvas"></canvas>

              <div
                  style="position: absolute;top:11px;left:14px;font-family: PingFangSC-Regular;font-size: 14px;letter-spacing: 0.26px;text-align: justify;text-align: justify;opacity: 0.41;"
              >(次)
              </div>
              <div
                  style="position: absolute;right:30px;bottom:10px;font-family: PingFangSC-Regular;font-size: 14px;letter-spacing: 0.26px;text-align: justify;text-align: justify;opacity: 0.41;"
              >(日)
              </div>
            </div>
          </div>
          <div class="field_top">
            <div class="field_top_left">
              <img :src="warning" style="margin-top: 1px"/>
            </div>
            <div class="field_top_right">以下仅展现非凡云代表应用相关数据</div>
          </div>
          <div style="padding:0 20px 20px 20px;">
            <div class="field_foot">
              <div class="field_foot_part">
                <div class="field_foot_part_title" @click="nav2ConfirmDetail">
                  <div class="field_foot_part_block"></div>
                  <div class="field_foot_part_text">已认证医生</div>
                  <div class="field_foot_part_icon">
                    <img :src="right"/>
                  </div>
                </div>
                <div class="field_foot_view">
                  <div class="field_foot_view_top">
                    <span class="field_foot_view_top1">认证总数:</span>
                    <span class="field_foot_view_top2">{{ hasCertifi.count }}</span>
                    <span class="field_foot_view_top3">/{{ hasCertifi.total }}</span>
                  </div>
                  <div class="field_foot_view_bottom">
                    <span class="field_foot_view_bottom1">本日新增:</span>
                    <span class="field_foot_view_bottom2">{{ hasCertifi.incre }}</span>
                  </div>
                </div>
              </div>
              <div class="field_foot_middle"></div>
              <div class="field_foot_part">
                <div class="field_foot_part_title" @click="nav2ConfirmWxDetail">
                  <div class="field_foot_part_block"></div>
                  <div class="field_foot_part_text">已加微信认证医生</div>
                  <div class="field_foot_part_icon">
                    <img :src="right"/>
                  </div>
                </div>
                <div class="field_foot_view">
                  <div class="field_foot_view_top">
                    <span class="field_foot_view_top1">认证总数:</span>
                    <span class="field_foot_view_top2">{{ hasWxAdd.count }}</span>
                    <span class="field_foot_view_top3">/{{ hasWxAdd.total }}</span>
                  </div>
                  <div class="field_foot_view_bottom">
                    <span class="field_foot_view_bottom1">本日新增:</span>
                    <span class="field_foot_view_bottom2">{{ hasWxAdd.incre }}</span>
                  </div>
                </div>
              </div>
              <div class="field_foot_part">
                <div class="field_foot_part_title">
                  <div class="field_foot_part_block"></div>
                  <div class="field_foot_part_text">投递数</div>
                  <div class="field_foot_part_icon">
                    <img :src="right"/>
                  </div>
                </div>
                <div class="field_foot_view">
                  <div class="field_foot_view_top">
                    <span class="field_foot_view_top1">认证总数:</span>
                    <span class="field_foot_view_top2">{{ hasSend.total }}</span>
                  </div>
                  <div class="field_foot_view_bottom">
                    <span class="field_foot_view_bottom1">本日新增:</span>
                    <span class="field_foot_view_bottom2">{{ hasSend.incre }}</span>
                  </div>
                </div>
              </div>
              <div class="field_foot_middle"></div>
              <div class="field_foot_part">
                <div class="field_foot_part_title">
                  <div class="field_foot_part_block"></div>
                  <div class="field_foot_part_text">打开率</div>
                  <div class="field_foot_part_icon">
                    <img :src="right"/>
                  </div>
                </div>
                <div class="field_foot_view">
                  <div class="field_foot_view_top">
                    <span class="field_foot_view_top1">认证总数:</span>
                    <span class="field_foot_view_top2">{{ hasOpen.month }}</span>
                  </div>
                  <div class="field_foot_view_bottom">
                    <span class="field_foot_view_bottom1">本日新增:</span>
                    <span class="field_foot_view_bottom2">{{ hasOpen.day }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="HCP明细" name="b" title-style="font-size: 16px;" style="min-height: 77vh;">
          <div class="field_top">
            <div class="field_top_left"><img :src="warning" style="margin-top: 1px"/></div>
            <div class="field_top_right">此报表仅展现线上拜访相关数据</div>
          </div>
          <div style="padding: 12px;display: flex;">
            <div class="condition">
              <div v-for="(item, index) in productList" :key="index"
                   :class="condition_selected==index?'condition_check':'condition_uncheck'"
                   :style="item.select?'color: #454592;background: rgba(69, 69, 146, 0.1);':'',index%2?'border-top-right-radius:30px;border-bottom-right-radius:30px;':'border-top-left-radius:30px;border-bottom-left-radius:30px;'"
                   style="width:50%;height:100%;"
                   @click="conditionChange(index)">
                {{ item.name }}
              </div>
            </div>
            <div style="width:12%;display:flex;justify-content:center;align-items:center;">
              <img :src="search_icon" style="width:20px;height:20px;" @click="showSearchInput"/>
            </div>
            <div style="width: 12%;display: flex;justify-content: center;align-items: center;position: relative;">
              <img :src="filter_icon" style="width:20px;height:20px;" @click="openFilter"/>
              <div style="color:rgb(69, 69, 146);position: absolute;width: 14px;
              height: 14px;border-radius: 50%;top:3px;right:-7px;border:1px solid rgb(69, 69, 146);display: flex;
              justify-content: center;align-items: center;font-size: 12px;" v-if="selectCount>0">
                {{ selectCount }}
              </div>
            </div>
          </div>
          <div v-if="!filter_window">
            <div style="border-bottom:1px solid #ccc;" v-if="search_input_visible"></div>
            <div style="display: flex;flex-direction: row;" v-if="search_input_visible">
              <div class="search">
                <img :src="search_icon" @click="clickSearch"/>
                <form action="javasearchTextscript:void 0" style="display: flex;">
                  <input class="input" @input="inputSearch($event)" :value="searchText" type="search"
                         @keyup.13="clickSearch"
                         placeholder="搜索医生"/>
                  <img :src="close_icon" style="width: 20px;height:20px;" v-if="searchText" @click="searchText=''"/>
                </form>
              </div>
              <div class="cancel" @click="hideSearchInput">
                取消
              </div>
            </div>
            <div style="border-bottom:1px solid #ccc;" v-if="search_input_visible"></div>
            <div class="field_tab">
              <div class="field_table">
                <span class="field_table_title1">
                  <span style="margin-left: 4px;">姓名</span>
                </span>
                <span class="field_table_title2">有效触达数</span>
                <span class="field_table_title3">详情</span>
              </div>
              <div v-for="(item,index) in list" :key="index">
                <div style="display: flex;flex-direction: row;border-bottom: 1px solid #DDDCE1;margin: 10px 0 0 0;">
                  <div class="title_top1">
                    <div class="titleicon"></div>
                    <div class="title_right" style="display: flex;align-items: center;">{{ item.representativeName }}
                    </div>
                  </div>
                  <div class="title_top2" v-if="item.showTableDetail==true">
                    <img :src="down_cc" style="display: flex;align-items: center;transform: rotate(180deg)"
                         @click="ShowchangeTable(index)"/>
                  </div>
                  <div class="title_top2" v-else>
                    <img :src="down_cc" style="display: flex;align-items: center;" @click="ClosechangeTable(index)"/>
                  </div>
                </div>
                <div style="margin-top:10px " v-if="item.showTableDetail==true">
                  <div class="field_table_detail" v-for="(item,index) in item.detailList" :key="index">
                    <span class="field_table_detail_title1">
                      <span style="width: 8px;margin-right: 4px;height: 100%;display: flex;align-items: center;"
                            v-if="item.ifCerHcp==1">
                        <img :src="star_icon" style="width: 8px;height: 8px;"/>
                      </span>
                      <span>{{ item.hcpName }}</span>
                      <span style="width: 8px;height: 100%;margin-left: 4px;display: flex;" v-if="item.ifCotHcp==1">
                        <img :src="wechat_icon" style="width: 18px;height: 18px;"/>
                      </span>
                    </span>
                    <span v-if="condition_selected==0">
                    <span class="field_table_detail_title2">{{ item.numDtdTotEngage }}</span>
                </span>
                    <span v-else>
                    <span class="field_table_detail_title2">{{ item.numMonTotEngage }}</span>
                </span>
                    <span class="field_table_detail_title3" @click="JumpDetail(item.hcpEtmsId)">
                      <img :src="arrow_right" style="width: 16px;height: 16px;"/>
                    </span>
                  </div>
                </div>
              </div>

            </div>
          </div>
          <div v-if="filter_window" style="width: 100%;height: 65vh;z-index:3;">
            <div style="padding: 8px 20px 0px;">
              <div class="title_top">
                <div class="titleicon"></div>
                <div class="title_right" style="display: flex;align-items: center;">客户状态
                  <img :src="star_icon" style="padding-left:10px;width: 8px;height: 8px;"/>
                </div>
              </div>
              <div class="screenList">
                <div v-for="(item, index) in certiList" :key="index" @click="selectCerti(index)"
                     :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                     class="screen_item">
                  {{ item.name }}
                </div>
              </div>

            </div>
            <div style="padding: 8px 20px 0px;">
              <div class="title_top">
                <div class="titleicon"></div>
                <div class="title_right" style="display: flex;align-items: center;">是否加微信
                  <img :src="wechat_icon" style="padding-left:10px;width: 18px;height: 18px;"/>
                </div>
              </div>
              <div class="screenList">
                <div v-for="(item, index) in certiWxList" :key="index" @click="selectWxCerti(index)"
                     :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                     class="screen_item">
                  {{ item.name }}
                </div>
              </div>

            </div>
            <!--            <div style="padding: 8px 20px 0px;">-->
            <!--              <div class="title_top">-->
            <!--                <div class="titleicon"></div>-->
            <!--                <div class="title_right" style="display: flex;align-items: center;">医生分组-->
            <!--                </div>-->
            <!--              </div>-->
            <!--              <div class="screenList">-->
            <!--                <div v-for="(item, index) in doctorList" :key="index" @click="selectDoctor(index)"-->
            <!--                     :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"-->
            <!--                     class="screen_item">-->
            <!--                  {{ item.name }}-->
            <!--                </div>-->
            <!--              </div>-->

            <!--            </div>-->
            <div style="position: fixed;z-index: 9999;bottom: 0;width: 100%;">
              <div style="display: flex;flex-direction: row;justify-content: space-between;padding: 20px;">
                <div class="button" @click="closeFilter"
                     :style="'width:' + (clientWidth - 60) / 2 + 'px;background: #ACB318;'">取消
                </div>
                <div class="button" @click="doFilter"
                     :style="'width:' + (clientWidth - 60) / 2 + 'px;background: #454592;'">查看
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <!--        <van-tab title="HCP明细" name="b" title-style="font-size: 16px;">-->
        <!--          <div style="width: 100%;height: 78vh;display: flex;justify-content: center;font-family: PingFangSC-Semibold;font-size: 16px;color: #454592;letter-spacing: 0.3px;-->
        <!--text-align: justify;line-height: 24px;">-->
        <!--            <div style="margin-top:150px;display: flex;justify-items: center;align-items: center;flex-direction: column;">-->
        <!--              <img :src="unrelease" style="width: 261.6px;height: 177.6px"/>-->
        <!--              <div style="margin-top:19.4px;">-->
        <!--                即将上线！敬请期待！-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </van-tab>-->
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {Loading} from "vant";
import left_icon from "@assets/icon/chevron_left.svg";
import right_icon from "@assets/icon/chevron_right.svg";
import search_icon from '@assets/icon/search.svg'
import filter_icon from '@assets/icon/21.svg'
import star_icon from '@assets/icon/star.svg'
import dayjs from "dayjs";
import F2 from "@antv/f2";

import _ from "lodash";
import down_cc from "@assets/icon/34.svg";
import unrelease from "@assets/image/coming_soon.png";
import {Tab, Tabs, Circle, Overlay} from "vant";
// Vue.use(infiniteScroll)
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Circle);
import warning from "@assets/icon/warning.svg";
import info from "@assets/icon/16.svg";
import right from "@assets/icon/right.svg";
import down from "@assets/icon/down.svg";
import up from "@assets/icon/up.svg";
import Calendar from "@components/snfDashboardCalendar";
import {getdm430, dmReport, dmPie, getHcpDetail} from "@api/schedule";
import Combined from "@assets/icon/Combined Shape.svg";
import wechat_icon from "@assets/icon/wechat.svg";
import arrow_right from '@assets/icon/arrow_right.svg'
import close_icon from '@assets/icon/close.svg';
import env from "@config/env";

export default {
  name: "DM",
  components: {
    Tab,
    Tabs,
    Calendar,
    Loading,
    Overlay,
  },
  data() {
    return {
      close_icon: close_icon,
      clientWidth: document.documentElement.clientWidth, // 页面宽度
      arrow_right: arrow_right,
      wechat_icon: wechat_icon,
      star_icon: star_icon,
      list: [],
      search_input_visible: false,
      filter_window: false,
      certiList: [
        {
          name: '已认证',
          code: 1,
          select: false,
        },
        {
          name: '未认证',
          code: 0,
          select: false,
        },
      ],
      certiWxList: [
        {
          name: '已加微信',
          code: 1,
          select: false,
        },
        {
          name: '未加微信',
          code: 0,
          select: false,
        },
      ],
      doctorList: [
        {
          name: '全部',
          select: false,
        },
        {
          name: '分组一',
          select: false,
        },
        {
          name: '分组二',
          select: false,
        },
      ],
      filter_icon: filter_icon,
      search_icon: search_icon,
      condition_selected: 0,
      productList: [
        {
          name: '当日明细',
        },
        {
          name: '月累计明细',
        }
      ],

      dayChartData: [],
      monthChartData: [],
      cal_label: "",
      weekday: "",
      buName: sessionStorage.getItem("email"),
      bu: sessionStorage.getItem("bu"),
      Combined: Combined,
      unrelease: unrelease,
      fullCalendarShow: false,
      loading: true,
      left_icon: left_icon,
      right_icon: right_icon,
      dayList: [],
      down_cc: down_cc,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      activeName: "a",
      activeNames: ["1"],
      info: info,
      right: right,
      warning: warning,
      down: down,
      up: up,
      hasCertifi: {
        total: 0,
        count: 0,
        incre: 0,
      },
      hasWxAdd: {
        total: 0,
        count: 0,
        incre: 0,
      },
      hasSend: {
        total: 0,
        incre: 0,
      },
      hasOpen: {
        month: "0%",
        day: "0%",
      },
      dayPie: {
        total: 0,
        current: 0,
        rate: 0,
      },
      monthPie: {
        total: 0,
        current: 0,
        rate: 0,
      },
      channel: [],
      current_num: 100,
      month_num: 100,
      current_rate: 10,
      month_rate: 20,
      day: "",
      tableShow: true,
      closeTableShow: false,
      gradientColor: {
        "2%": "#EEEEFF",
        "17%": "#BCBCFB",
        "49%": "#9292F9",
        "80%": "#8282FA",
        "100%": "#8888F2",
      },
      searchText: ''
    };
  },
  methods: {
    JumpDetail(hcpEtmsId) {
      let url = env.ONE_STEP_SEND + hcpEtmsId
      window.location.href = url
    },
    //点击放大镜 根据筛选条件查询数据
    clickSearch() {
      this.list = [];
      this.gethcp();
    },
    // 输入搜索条件
    inputSearch(e) {
      this.searchText = e.currentTarget.value
    },
    ShowchangeTable(index) {
      this.list[index].showTableDetail = false;
    },
    ClosechangeTable(index) {
      this.list[index].showTableDetail = true;
    },
    doFilter() {
      //TODO 调用接口查询数据
      this.filter_window = false
      this.list = [];
      this.gethcp();
    },
    closeFilter() {
      this.filter_window = false
    },
    selectCerti(index) {
      this.certiList[index].select = !this.certiList[index].select
    },
    selectWxCerti(index) {
      this.certiWxList[index].select = !this.certiWxList[index].select
    },
    selectDoctor(index) {
      this.doctorList[index].select = !this.doctorList[index].select
    },
    hideSearchInput() {
      this.search_input_visible = false
    },
    openFilter() {
      this.filter_window = !this.filter_window
    },
    showSearchInput() {
      this.search_input_visible = true
    },
    conditionChange(index) {
      this.condition_selected = index
    },
    changeWeek(type) {
      switch (type) {
        case "preWeek": {
          this.weekday = dayjs(this.weekday)
              .subtract(7, "day")
              .format("YYYY-M-D");
          this.getWeekDay();
          break;
        }
        case "nextWeek": {
          this.weekday = dayjs(this.weekday).add(7, "day").format("YYYY-M-D");
          this.getWeekDay();
          break;
        }
      }
    },
    nav2GroupDetail() {
      this.$router.push(
          `/dashboard/dm_group?email=${this.buName}&day=${dayjs(this.day).format(
              "YYYY-MM-DD"
          )}`
      );
    },
    nav2ConfirmWxDetail() {
      this.$router.push(
          `/dashboard/dm_confirwxmdetail?email=${this.buName}&day=${dayjs(
              this.day
          ).format("YYYY-MM-DD")}`
      );
    },
    nav2ConfirmDetail() {
      this.$router.push(
          `/dashboard/dm_confirmdetail?email=${this.buName}&day=${dayjs(
              this.day
          ).format("YYYY-MM-DD")}`
      );
    },
    handleCalendarShow() {
      this.fullCalendarShow = !this.fullCalendarShow;
    },
    tabChange(name, title) {
    },
    groupMonthChartRender() {
      if (this.monthChartCanvas) {
        this.monthChartCanvas.changeData(this.monthChartData);
        return;
      }
      let self = this;
      const data = this.monthChartData;
      let c_height = document.getElementsByClassName("field_tooltip")[0]
          .offsetHeight;
      let c_width = document.getElementsByClassName("field_tooltip")[0]
          .offsetWidth;
      this.monthChartCanvas = new F2.Chart({
        id: "monthChartCanvas",
        width: c_width,
        height: c_height,
        pixelRatio: window.devicePixelRatio,
      });
      this.monthChartCanvas.source(data, {
        count: {
          ticks: [0, 10, 20, 30, 40],
        },
      });
      // 设置图例居中显示
      this.monthChartCanvas.legend({
        position: "top",
        align: "right",
        itemWidth: null, // 图例项按照实际宽度渲染
        custom: true,
        nameStyle: {
          fontSize: 14,
        },
        items: [
          {
            name: "月目标客户累计覆盖数",
            marker: function marker(x, y, r, ctx) {
              ctx.lineWidth = 1;
              ctx.strokeStyle = ctx.fillStyle;
              ctx.moveTo(x - r, y);
              ctx.lineTo(x + r, y);
              ctx.stroke();
              ctx.fill();
            },
            fill: "#ACB318",
            checked: true,
          },
        ],
      });
      this.monthChartCanvas.tooltip({
        showCrosshairs: true,
        custom: true, // 自定义 tooltip 内容框
        layout: "vertical",
        onChange: function onChange(ev) {
          const tooltipEl = $(".f2-tooltip-month");
          const currentData = ev.items;
          const text = currentData.value;
          tooltipEl.html(
              [
                `<div style="margin:8px 0 0 12px;font-size: 12px;font-family: PingFangSC-Regular;color: #FFFFFF;letter-spacing: 0.22px;text-align: justify;line-height: 16px;">${currentData[0].origin.time.replace(
                    "-/g",
                    "/"
                )}</div>`,
                `<div style="margin:0px 0 8px 12px;font-size: 12px;font-family: PingFangSC-Regular;color: #FFFFFF;letter-spacing: 0.22px;text-align: justify;line-height: 16px;">月目标客户累计覆盖数:${currentData[0].origin.count}</div>`,
              ].join("")
          );
          // tooltipEl.html([ '<span>' + currentData.origin.date + '</span>', '<span>Web Visits: <b>' + text + '</b></span>' ].join(''));
          const canvasOffsetTop = $("#monthChartCanvas").position().top;
          const canvasOffsetLeft = $("#monthChartCanvas").position().left;
          tooltipEl.css({
            width: "174px",
            background: "linear-gradient(248deg, #AFB34F 0%, #949917 95%)",
            borderRadius: "4px",
            opacity: "0.75",
            display: "flex",
            flexDirection: "column",
            justifyItems: "center",
            left:
                canvasOffsetLeft +
                currentData[0].x / 2 -
                tooltipEl.outerWidth() / 100 +
                "px",
            top:
                canvasOffsetTop +
                currentData[0].y -
                tooltipEl.outerHeight() -
                20 +
                "px",
          });
        },
        onHide: function onHide() {
          const tooltipEl = $(".f2-tooltip-month");
          tooltipEl.css({
            opacity: 0,
            display: "flex",
            flexDirection: "column",
            justifyItems: "center",
          });
        },
      });
      this.monthChartCanvas.axis("time", {
        label: function label(text, index, total) {
          const textCfg = {};
          if (index === 0) {
            textCfg.textAlign = "left";
          } else if (index === total - 1) {
            textCfg.textAlign = "right";
          }
          let t = text.split("-")[2];
          if (self.monthChartData.length > 4) {
            textCfg.text = monthList.includes(t) ? t : "";
          } else {
            textCfg.text = t;
          }
          return textCfg;
        },
      });
      this.monthChartCanvas.axis("count", {
        label: function label(text) {
          const number = parseInt(text);
          const cfg = {};
          if (number == 30) {
            cfg.fill = "#ACB318";
          } else {
            cfg.fill = "#333";
          }
          return cfg;
        },
      });
      this.monthChartCanvas
          .area()
          .position("time*count")
          .color("momo", (type) => {
            return "l(-90) 0:#fff 1:#D6DA35";
          })
          .adjust("stack");
      this.monthChartCanvas
          .line()
          .position("time*count")
          .color("momo", (type) => {
            return "#ACB318";
          })
          .adjust("stack");
      this.monthChartCanvas.render();
    },
    groupDayChartRender() {
      if (this.dayChartCanvas) {
        this.dayChartCanvas.changeData(this.dayChartData);
        return;
      }
      let self = this;
      const data = this.dayChartData;
      let c_height = document.getElementsByClassName("field_tooltip")[0]
          .offsetHeight;
      let c_width = document.getElementsByClassName("field_tooltip")[0]
          .offsetWidth;
      this.dayChartCanvas = new F2.Chart({
        id: "dayChartCanvas",
        width: c_width,
        height: c_height,
        pixelRatio: window.devicePixelRatio,
      });
      this.dayChartCanvas.source(data, {
        count: {
          ticks: [0, 2, 4, 6, 8],
        },
      });
      // 设置图例居中显示
      this.dayChartCanvas.legend({
        position: "top",
        align: "right",
        itemWidth: null, // 图例项按照实际宽度渲染
        custom: true,
        nameStyle: {
          fontSize: 14,
        },
        items: [
          {
            name: "日均覆盖数",
            marker: function marker(x, y, r, ctx) {
              ctx.lineWidth = 1;
              ctx.strokeStyle = ctx.fillStyle;
              ctx.moveTo(x - r, y);
              ctx.lineTo(x + r, y);
              ctx.stroke();
              ctx.fill();
            },
            fill: "#8888F2",
            checked: true,
          },
        ],
      });
      this.dayChartCanvas.tooltip({
        showCrosshairs: true,
        custom: true, // 自定义 tooltip 内容框
        layout: "vertical",
        onChange: function onChange(ev) {
          const tooltipEl = $(".f2-tooltip-day");
          const currentData = ev.items;
          const text = currentData.value;
          tooltipEl.html(
              [
                `<div style="margin:8px 0 0 12px;font-size: 12px;font-family: PingFangSC-Regular;color: #FFFFFF;letter-spacing: 0.22px;text-align: justify;line-height: 16px;">${currentData[0].origin.time.replace(
                    "-/g",
                    "/"
                )}</div>`,
                `<div style="margin:0px 0 8px 12px;font-size: 12px;font-family: PingFangSC-Regular;color: #FFFFFF;letter-spacing: 0.22px;text-align: justify;line-height: 16px;">日均覆盖数:${currentData[0].origin.count}</div>`,
              ].join("")
          );
          // tooltipEl.html([ '<span>' + currentData.origin.date + '</span>', '<span>Web Visits: <b>' + text + '</b></span>' ].join(''));
          const canvasOffsetTop = $("#dayChartCanvas").position().top;
          const canvasOffsetLeft = $("#dayChartCanvas").position().left;
          tooltipEl.css({
            background: " linear-gradient(-20deg, #5E5EC5 0%, #2F2F8E 72%)",
            borderRadius: "4px",
            opacity: "0.75",
            display: "flex",
            flexDirection: "column",
            justifyItems: "center",
            left:
                canvasOffsetLeft +
                currentData[0].x / 2 -
                tooltipEl.outerWidth() / 100 +
                "px",
            top:
                canvasOffsetTop +
                currentData[0].y -
                tooltipEl.outerHeight() -
                20 +
                "px",
          });
        },
        onHide: function onHide() {
          const tooltipEl = $(".f2-tooltip-day");
          tooltipEl.css({
            opacity: 0,
            display: "flex",
            flexDirection: "column",
            justifyItems: "center",
          });
        },
      });
      this.dayChartCanvas.axis("time", {
        label: function label(text, index, total) {
          const textCfg = {};
          if (index === 0) {
            textCfg.textAlign = "left";
          } else if (index === total - 1) {
            textCfg.textAlign = "right";
          }
          let t = text.split("-")[2];
          if (self.dayChartData.length > 4) {
            textCfg.text = monthList.includes(t) ? t : "";
          } else {
            textCfg.text = t;
          }
          return textCfg;
        },
      });
      this.dayChartCanvas.axis("count", {
        label: function label(text) {
          const number = parseInt(text);
          const cfg = {};
          if (number == 4) {
            cfg.fill = "#6767C9";
          } else {
            cfg.fill = "#333";
          }
          return cfg;
        },
      });
      this.dayChartCanvas
          .line()
          .position("time*count")
          .color("l(180) 0:#1890FF 1:#f7f7f7");
      this.dayChartCanvas
          .area()
          .position("time*count")
          .color("momo", (type) => {
            return "l(-90) 0:#fff 1:#1890FF";
          })
          .adjust("stack");
      this.dayChartCanvas.render();
    },
    get430() {
      this.monthChartData = [];
      this.dayChartData = [];
      getdm430({
        dayOfMonthFirst: dayjs(this.day).startOf("month").format("YYYY-MM-DD"),
        dayOfMonthLast: dayjs(this.day).endOf("month").format("YYYY-MM-DD"),
        currentDay: dayjs(this.day).format("YYYY-MM-DD"),
      }).then((res) => {
        if (res.successful) {
          if (res.data) {
            this.dayPercent = res.data.numMonAvgDailyEng;
            this.monthPercent = res.data.numMonTotCustCov;
            this.channel = res.data.channels;
            res.data.daily.map((item) => {
              this.dayChartData.push({
                count: item.numMonAvgDailyEng,
                momo: "投递",
                time: item.day,
              });
              this.monthChartData.push({
                count: item.numMonTotCustCov,
                momo: "投递",
                time: item.day,
              });
            });
          } else {
            alert("云代表数据未同步");
          }
        } else {
          alert("获取430数据失败！");
        }
      });
    },
    dmPie() {
      let self = this;
      dmPie({
        email: this.buName,
        day: dayjs(this.day).format("YYYY-MM-DD"),
      }).then((res) => {
        if (res.successful) {
          if (res.data) {
            self.dayPie.total = res.data[0].num_rep_dtd;
            self.dayPie.current = res.data[0].num_achieve_rep_dtd;
            self.dayPie.rate =
                (this.dayPie.current / this.dayPie.total).toFixed(2) * 100;
            self.monthPie.total = res.data[0].num_rep_mtd;
            self.monthPie.current = res.data[0].num_achieve_rep_mtd;
            self.monthPie.rate =
                (this.monthPie.current / this.monthPie.total).toFixed(2) * 100;
          } else {
            alert("团队完成数据未同步");
          }
        } else {
          alert("获取团队完成数据失败");
        }
      });
    },
    showTable() {
      this.tableShow = false;
      this.closeTableShow = true;
    },
    closeTable() {
      this.tableShow = true;
      this.closeTableShow = false;
    },
    buCardData() {
      dmReport({time: dayjs(this.day).format("YYYY-MM-DD")}).then((res) => {
        if (res.successful) {
          if (res.data) {
            this.hasCertifi.total = res.data.numTgtHcp;
            this.hasCertifi.count = res.data.numOpCertHcp;
            this.hasCertifi.incre = res.data.numOpCertHcpAdd;
            this.hasWxAdd.total = res.data.numTgtHcp;
            this.hasWxAdd.count = res.data.numOpCertCotHcp;
            this.hasWxAdd.incre = res.data.numOpCertCotHcpAdd;
            this.hasSend.total = res.data.numSendMtd;
            this.hasSend.incre = res.data.numSendDtd;
            this.hasOpen.month =
                (res.data.numContentOpenMtd / res.data.numContentMtd).toFixed(2) *
                100 +
                "%";
            this.hasOpen.day =
                (res.data.numContentOpenDtd / res.data.numContentDtd).toFixed(2) *
                100 +
                "%";
          } else {
            alert("云代表数据未同步！");
          }
        } else {
          alert("获取菲凡云代表相关数据失败！");
        }
      });
    },
    getWeekDay() {
      this.dayList = [];
      let weekStart = dayjs(this.weekday).startOf("week").format("YYYY-M-D");

      for (let i = 0; i < 7; i++) {
        this.dayList.push({
          idx: dayjs(weekStart).add(i, "day").format("D"),
          day: dayjs(weekStart).add(i, "day").format("YYYY-M-D"),
        });
      }
    },
    handleDayClick(day) {
      this.day = day;
      //TODO 调用接口获取数据
    },
    gethcp() {
      let certCode = "";
      this.certiList.forEach((item, idx) => {
        if (item.select == true) {
          certCode = item.code;
        }
      })
      if (this.certiList[0].select == true && this.certiList[1].select == true) {
        certCode = "";
      }

      let certWXCode = "";
      this.certiWxList.forEach((item, idx) => {
        if (item.select == true) {
          certWXCode = item.code;
        }
      })
      if (this.certiWxList[0].select == true && this.certiWxList[1].select == true) {
        certWXCode = "";
      }

      let dayTime = dayjs(this.day).format('YYYY-MM-DD');
      //组装参数
      let param = {
        email: '',
        dmEmail: this.buName,
        day: dayTime,
        hcpName: this.searchText,
        ifCerHcp: certCode,
        ifCotHcp: certWXCode
        // email:'',
        // dmEmail:'long1.chen@sanofi.com',
        // day:'2020-9-28',
        // hcpName:'',
        // ifCerHcp:'',
        // ifCotHcp:''
      }
      getHcpDetail(param).then(res => {
        if (res.successful == true) {
          for (let i = 0; i < res.data.length; i++) {
            this.list.push({
              representativeName: res.data[i].representativeName,
              showTableDetail: true,
              detailList: res.data[i].detailList
            })
          }
        }
      })
    },
  },

  mounted() {
    setTimeout(() => {
      this.loading = false;
      this.day = dayjs().subtract(1, "day").format("YYYY-M-D");
      this.weekday = this.day;
      this.getWeekDay();
    }, 1000);
  },
  watch: {
    day(newval, oldval) {
      this.dayChartData = [];
      this.monthChartData = [];
      this.fullCalendarShow = false;
      this.weekday = newval;
      this.dmPie();
      this.getWeekDay();
      this.buCardData();
      if (this.bu == 'PC' || this.bu == 'DBU' || this.bu == 'CV' || this.bu == 'SC' || this.bu == 'CV&EP') {
        this.get430()
      }
      this.gethcp();
      let self = this;
      this.cal_label = dayjs(newval).format("YYYY/MM");
      setTimeout(function () {
        self.groupDayChartRender();
        self.groupMonthChartRender();
      }, 500);
    },
  },
  computed: {
    selectCount() {
      let c_count = this.certiList.filter(item => item.select).length
      let w_count = this.certiWxList.filter(item => item.select).length
      let d_count = this.doctorList.filter(item => item.select).length
      return c_count + w_count + d_count
    }
  }
};
</script>

<style scoped lang="scss">
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  height: 36px;
  border-radius: 3px;
}

.screen_item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 16px;
  margin: 0 8px 8px 0;
  font-size: 12px;
  color: #666666;
  border: 1px solid #666666;
  border-radius: 20px;
}

.screenList {
  display: flex;
  flex-wrap: wrap;
}

.titleicon {
  height: 20px;
  width: 4px;
  background: #ACB318;
  margin-right: 8px;
}

.title_top {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 14px 0 14px;
}

.title_top1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 14px;
}

.title_top2 {
  padding: 0 0 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  right: 10px;
}

.cancel {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #ACB318;
  letter-spacing: 0.26px;
  text-align: justify;
  line-height: 16px;
  display: flex;
  align-items: center;
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

.input {
  flex: 1;
  width: 250px;
  border-width: 0;
  background: none;
  margin-left: 5px;
  color: #666666;
  opacity: 0.6;
  font-size: 14px;
}

.search {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 12px;
  width: 85%;
  height: 45px;
}

.condition_uncheck {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
}

.condition_check {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #454592;
  background: rgba(69, 69, 146, 0.1);
}

.condition {
  font-family: PingFangSC-Regular;
  display: flex;
  flex-direction: row;
  flex: 2;
  max-width: 76%;
  height: 30px;
  border: 1px solid #454592;
  border-radius: 30px;
  font-size: 12px;

}

.wrapper {
  padding: 12px;
}

.field_top {
  width: 100%;
  height: 24px;
  background: rgba(69, 69, 146, 0.06);
  margin-top: 1.2%;
}

.field_top_left {
  margin-left: 5.3%;
  float: left;
  margin-top: 3px;
}

.field_top_right {
  float: left;
  margin-left: 0.4%;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #666666;
  letter-spacing: 0.22px;
  text-align: justify;
  line-height: 24px;
}

.title {
  width: 100%;
  height: 24px;
}

.title_block {
  background: #acb318;
  width: 4px;
  height: 20px;
  float: left;
  margin-left: 7px;
}

.title_text {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #333333;
  letter-spacing: 0.3px;
  text-align: justify;
  line-height: 21px;
  margin-left: 12px;
  float: left;
}

.title_detail {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #acb318;
  letter-spacing: 0.26px;
  text-align: center;
  float: right;
}

.field_item {
  width: 100%;
  height: 212px;
  box-shadow: 2px 4px 10px 0 rgba(38, 38, 98, 0.3);
  background-image: linear-gradient(-30deg, #5656b5 0%, #31317e 83%);
  border-radius: 4px 4px 0px 0px;
  margin-top: 0.8%;
}

.field_item_part {
  width: 50%;
  height: 212px;
  float: left;
}

.field_item_part_title {
  margin-top: 15px;
  margin-left: 20px;
}

.field_item_part_title_font {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0.3px;
  text-align: justify;
  line-height: 24px;
  float: left;
}

.field_item_part_title_icon {
  float: left;
  margin-top: 4px;
  margin-left: 5px;
}

.field_click {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #4848b4, #7f7fdd);
  border-radius: 0 0 4px 4px;
}

.field_click_title {
  width: 100%;
  opacity: 0.8;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 0.26px;
  text-align: center;
  padding-top: 7px;
}

.field_click_icon {
  width: 100%;
  text-align: center;
}

.slot1 {
  font-family: PingFangSC-Regular;
  font-size: 32px;
  color: #ffffff;
  letter-spacing: 0.6px;
  line-height: 48px;
  margin-top: 25px;
  text-align: center;
}

.slot2 {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.22px;
  text-align: center;
  margin-top: 3px;
}

.slot3 {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.26px;
  text-align: center;
  margin-top: 3px;
}

.field_tooltip {
  width: 100%;
  background: #ffffff;
  margin-top: 10px;
  border-radius: 4px;
}

.field_foot {
  width: 100%;
  margin-top: 30px;
  height: 260px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.field_foot_part {
  width: 48%;
  float: left;
}

.field_foot_part_title {
  width: 100%;
  height: 22px;
  position: relative;
}

.field_foot_part_block {
  background: #acb318;
  width: 4px;
  height: 20px;
  float: left;
  margin-left: 7px;
}

.field_foot_part_text {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #333333;
  letter-spacing: 0.3px;
  text-align: justify;
  line-height: 21px;
  margin-left: 7px;
  float: left;
}

.field_foot_part_icon {
  float: right;
  position: absolute;
  right: 0;
}

.field_foot_view {
  width: 100%;
  height: 76px;
  background: #ffffff;
  margin-top: 10px;
}

.field_foot_view_top {
  padding-top: 12px;
  padding-left: 15px;
}

.field_foot_view_top1 {
  opacity: 0.41;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #000000;
  letter-spacing: 0.26px;
  text-align: justify;
}

.field_foot_view_top2 {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #454592;
  letter-spacing: 0.3px;
  text-align: justify;
  line-height: 24px;
  padding-left: 5px;
}

.field_foot_view_top3 {
  opacity: 0.8;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #333333;
  letter-spacing: 0.22px;
  text-align: justify;
  line-height: 16px;
}

.field_foot_view_bottom {
  padding-top: 5px;
  padding-left: 15px;
}

.field_foot_view_bottom1 {
  opacity: 0.41;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #000000;
  letter-spacing: 0.26px;
  text-align: justify;
}

.field_foot_view_bottom2 {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #454592;
  letter-spacing: 0.3px;
  text-align: justify;
  line-height: 24px;
  padding-left: 5px;
}

.field_foot_middle {
  width: 4%;
  float: left;
  height: 80px;
}

.field_foot_part_icon {
  margin-top: 2px;
}

.field_tab {
  background: rgba(69, 69, 146, 0.06);
  padding: 0 8px;
}

.field_table {
  width: 100%;
  height: 50px;
}

.field_table_title1 {
  width: 35%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  height: 60px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
}

.field_table_title2 {
  width: 30%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  height: 60px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.field_table_title3 {
  width: 35%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  height: 60px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.field_table_detail {
  width: 100%;
  height: 40px;
  background: #ffffff;
  margin-bottom: 8px;
  box-shadow: 0 4px 8px 0 rgba(49, 49, 126, 0.06);
  border-radius: 4px;
}

.field_table_detail_title1 {
  width: 35%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  line-height: 40px;
  display: flex;
  float: left;
  justify-content: center;
  align-items: center;
  height: inherit;
}

.field_table_detail_title2 {
  width: 30%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  line-height: 40px;
  display: block;
  float: left;
}

.field_table_detail_title3 {
  width: 35%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  line-height: 40px;
  float: left;
}

.field_click_up {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #4848B4, #7F7FDD);
  border-radius: 0 0 4px 4px;
}

/deep/ .van-tab {
  background: rgba(69, 69, 146, 0.06) !important;
}

.chart-wrapper {
  position: relative;
}

.f2-tooltip {
  -moz-box-shadow: 1px 1px 0.5px 0.5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 1px 1px 0.5px 0.5px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 0.5px 0.5px rgba(0, 0, 0, 0.3);
  position: absolute;
  z-index: 99;
  background-color: #1890ff;
  padding: 5px;
  border-radius: 3px;
  text-align: center;
  width: 120px;
  opacity: 0;
}

.f2-tooltip div {
  display: block;
  color: #fff;
}

.f2-tooltip div:nth-child(1) {
  font-size: 11px !important;
}

.f2-tooltip div:nth-child(2) {
  font-size: 13px !important;
}
</style>